/**
 * 单词跟读列表
 */
<template>
	<view class="list">
		<!--
		  scroll-view 组件可以设置滚动
		  scroll-y="true" 设置y轴滚动
		  -->
		<scroll-view scroll-y="true" class="scroll" :style="{height:scrollHeight}">
			<!-- v-for 循环语句 -->
			<view class="item" v-for="item in 10" :key="item" >
				<navigator :url="`/pages_word_follow-up/pages/practice/index?index=${item+1}`">
					past{{item}}
				</navigator>
			</view>
		</scroll-view>
	</view>
</template>

<script setup >
	//引入uniapp的生命周期
	import {onReady} from '@dcloudio/uni-app'
import { ref } from 'vue';
	
	//获取scroll的高度
	const scrollHeight = ref('auto')
	
	// onReady 页面渲染成功之后调用
	onReady(() =>{
		//获取系统信息的同步接口
		const system =  uni.getSystemInfoSync()
		//获取当前页面的可用高度
		const windowHeight =  system.windowHeight
		//scroll的高度 = 当前页面的可用高度 - 设置的顶部的边距
		scrollHeight.value = (windowHeight - 35) + 'px'
	})
	
	/**
	 * 页面跳转函数
	 */
	function toPages(url) {
		//这个url是指定页面路径
		//navigateTo 方法用于跳转到另一个页面上
		uni.navigateTo({
			url:url
		})
	}
</script>

<style scoped lang="scss">
	.scroll {
		width: 750rpx;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		margin-top: 30px;
		.item {
			text-align: center;
			margin: 0 auto;
			width: 600rpx;
			padding: 20rpx 15rpx;
			border: 1rpx solid #d1d1d1;
			border-radius: 10rpx;
			margin-bottom: 25rpx;
			font-size: 28rpx;
			font-weight: 600;
		}
		//最后一个元素设置底部外边距设置为0
		.item:last-child {
			margin-bottom: 0;
		}
	}
</style>